<template>
  <view
    :class="classArr"
    @click="controller.onClick()"
    :style="backgroundStyle"
  >
    <i-biz-row :layout="modelData.layout">
      <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
        <i-biz-col
          :layoutPos="panelItem.layoutPos"
          :state="container.panelItems[panelItem.id].state"
        >
          <i-biz-panel-detail-shell
            :modelData="panelItem"
            :container="container"
            :controls="controls"
          />
        </i-biz-col>
      </template>
    </i-biz-row>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { IControl, IPanelContainer } from "@ibiz/model-core";
import { computed, PropType } from "vue";
import { IViewLayoutPanelController } from "@ibiz-template/runtime";
import { isSvg } from "@ibiz-template/core";
import { PanelContainerImageController } from "./i-biz-panel-container-image.controller";
import { useNamespace } from "@/use";

// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  container: {
    type: Object as PropType<IViewLayoutPanelController>,
    required: true,
  },
  controller: {
    type: PanelContainerImageController,
    required: true,
  },
  controls: {
    type: Array as PropType<
      {
        modelData: IControl;
        slotProps: IData;
      }[]
    >,
    default: () => [],
  },
});

const ns = useNamespace("panel-container-image");
const { id } = props.modelData;

// 类名控制
const classArr = computed(() => {
  let result: Array<string | false> = [ns.b(), ns.m(id)];
  result = [...result];
  if (props.controller) {
    result.push(
      ...props.controller.containerClass,
      ns.is("hidden", props.controller.state && !props.controller.state.visible)
    );
  }
  return result;
});

const backgroundStyle = computed(() => {
  if (props.controller) {
    const image = props.controller.model.sysImage;
    const styles = {};
    let imgStr = "";
    if (image?.rawContent) {
      if (isSvg(image.rawContent)) {
        imgStr = `url(data:image/svg+xml;base64,${btoa(image.rawContent)})`;
      } else {
        imgStr = `url(${image.rawContent})`;
      }
    } else if (image?.imagePath) {
      imgStr = `url(${image.imagePath})`;
    }
    if (imgStr) {
      Object.assign(styles, {
        backgroundImage: imgStr,
      });
    }
    return styles;
  }

  return "";
});
</script>
<style lang="scss">
@import "./i-biz-panel-container-image.scss";
</style>
